import { View, Text, Image, ScrollView } from "@tarojs/components";
import { Component, ReactNode } from "react";
import { AtSearchBar, AtList, AtListItem } from "taro-ui";
import "./index.scss";
import i1 from "./images/i1.png";
import Req from "../../utils/request";
import { delay, isEmpty } from "../../utils/kit";
import Taro from "@tarojs/taro";
export default class Notice extends Component {
  state = {
    value: "",
    list: [],
    hasMore: true,
    currentPage: 1,
    loading: false,
  };
  get isMessage(){
    const {router} = Taro.getCurrentInstance();
    if(router?.params.notice == '2'){
      return true
    } 
    return false;
  }
  onChange = (val: string) => {
    this.setState({
      value: val,
    });
  };
  
  componentDidMount(): void {
    this.loadData();
  }
  onActioClick = () => {
    if (!isEmpty(this.state.value)) {
      this.setState(
        {
          list: [],
          currentPage: 1,
          hasMore: true,
        },
        () => {
          this.loadData();
        }
      );
    }
  };
  loadData = () => {
    const { currentPage, list, value } = this.state;
    this.setState({
      loading: true,
    });
    let _url = "/notice/list"
    if(this.isMessage){
      _url = "/message/list"
    }
    Req.get(
      _url,
      {
        // title: value,
        pageNum: currentPage,
        pageSize: 10,
      },
      {
        loading: false,
      }
    )
      .then((r) => {
        if (r.total - list.length === 0 || r.rows.length < 10) {
          this.setState({
            hasMore: false,
          });
        }
        this.setState({
          list: list.concat([...r.rows] as any),
          loading: false,
          currentPage: currentPage + 1,
        });
        //查询出来后就表示已经读取了
        let _ids = r.rows.map((e) => e.id).join(",");
        // if (_ids) {
        //   Req.post(
        //     "/message/read",
        //     {
        //       ids: _ids,
        //     },
        //     {
        //       header: {
        //         "content-type": "application/x-www-form-urlencoded",
        //       },
        //     }
        //   ).catch((e) => {});
        // }
      })
      .catch((e) => {
        this.setState({
          loading: false,
        });
      });
  };
  onScrollDetchEnd = () => {
    const { loading, hasMore } = this.state;
    if (loading) return;
    if (hasMore) {
      delay(300).then(() => {
        this.loadData();
      });
    } else {
      this.setState({
        loading: false,
      });
    }
  };
  render(): ReactNode {
    return (
      <View className="notice-container">
        <AtSearchBar
          value={this.state.value}
          onChange={this.onChange}
          onActionClick={this.onActioClick}
          onClear={() => {
            this.setState(
              {
                value: "",
                list: [],
                currentPage: 1,
                hasMore: true,
              },
              () => {
                this.loadData();
              }
            );
          }}
        />

        <ScrollView
          onScrollToLower={this.onScrollDetchEnd}
          scrollY
          className="scroll-wrapper"
        >
          <View className="p15">
            <AtList>
              {this.state.list.map((item: any, index) => (
                <AtListItem
                  onClick={() => {
                    let url = "/pages/notice-detail/index?id="+item.id
                    if(this.isMessage){
                      url += "&notice=2"
                    }
                    Taro.navigateTo({
                      url
                    })
                  }}
                  key={index}
                  className="no-arrow-space two-line-title"
                  title={
                    <View className="notice-list-item-title">
                      <Image
                        style={{
                          width: "30rpx",
                          height: "32rpx",
                        }}
                        className="h-32"
                        src={i1}
                      />
                      <Text>{item.title}</Text>
                    </View>
                  }
                  note={
                    <View className="notice-list-item-content">
                      <Text className="notice-list-item-content-desc two-line-max-text">
                        {item.memo}
                      </Text>
                      <Text className="notice-list-item-content-date">
                        {item.createTime}
                      </Text>
                    </View>
                  }
                />
              ))}
            </AtList>
            <View className="em-center-text">
              <Text>{this.state.hasMore ? "加载中..." : "没有更多了"}</Text>
            </View>
          </View>
        </ScrollView>
      </View>
    );
  }
}
